<template>
  <div>
    <div class="report-add">
      <div class="form-field">
        <input type="text" class="text-input" placeholder="[必填]请输入标题" v-model="name">
      </div>
      <div class="form-field" @click="showPopup">
        <input type="text" class="text-input" placeholder="[必填]请选择性银行" v-model="bank_name" readonly>
        <!-- <img src="/src/assets/icons/go-right.png" alt="go" class="field-button"> -->
      </div>
      <mt-popup v-model="popupVisible" position="bottom">
        <mt-picker :slots="slots" @change="onValuesChange" :showToolbar="true">
          <div class="picker-bar">
            <span @click="closePopup">取消</span>
            <span @click="confirm">确认</span>
          </div>
        </mt-picker>
      </mt-popup>
      <div v-if="!nextShow">
        <div class="form-field">
          <span class="file-content">{{imgTitle}}</span>
          <input type="file" name="upload" class="file-input" @change="uploads">
          <!-- <img src="/src/assets/icons/go-right.png" alt="go" class="field-button"> -->
        </div>
        <div class="form-field">
          <input type="text" class="text-input" placeholder="[选填]请粘贴链接" v-model="url">
        </div>
        <div class="form-field">
          <textarea name="" class="textarea" placeholder="[必填]请输入内容" v-model="content"></textarea>
        </div>
      </div>
      <footer class="footer-button">
        <mt-button @click.native="complete" :disabled="isDisabled || disBtn">爆料</mt-button>
      </footer>
      <div class="notice">
        <p>欢迎把您所知的羊毛爆料给惠权益，分享给广大的卡友。赢取现金奖励！</p>
        <p>什么是好爆料，参考如下几点：</p>
        <p class="ti-2">1. 非预先可知的且时效性很强的活动，例如：浦发红包大放水；</p>
        <p class="ti-2">2. 所得权益可快速变为现金或等价于现金的产品（如：信用卡积分、话费、京东E卡等），例如：充话费立减、京东E卡立减；</p>
        <p class="ti-2">3. 爆料内容操作简便可获得的，例如：小仙面馆 满减活动；</p>
      </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'

  export default {
    name: 'MyReportAdd',
    data () {
      return {
        popupVisible: false,
        slots: [{values: []}],
        name: '',
        bankList: [],
        bank_name: '',
        bank_id: '',
        image: '',
        url: '',
        content: '',
        imgTitle: '[选填]请上传图片',
        bankCheckId: 0,
        bankCheckName: '',
        disBtn: false
      }
    },
    computed: {
      nextShow () {
        return this.name === '' || this.bank_name === '' || this.bank_id === ''
      },
      isDisabled () {
        return this.name === '' || this.bank_name === '' || this.bank_id === '' || this.content === ''
      }
    },
    methods: {
      getBanks () {
        this.$post('/vue/bank/get_bank_list', {}).then((res) => {
          this.bankList = res
          let item = []
          for (let i = 0; i < res.length; i++) {
            item.push(res[i].name)
          }
          this.slots[0].values = item
        })
      },
      showPopup () {
        this.popupVisible = true
      },
      closePopup () {
        this.popupVisible = false
      },
      onValuesChange (p, v) {
        p.setSlotValue(1, v[0])
        this.bankCheckName = v[0]
        for (let i = 0; i < this.bankList.length; i++) {
          if (this.bankList[i].name === this.bankCheckName) {
            this.bankCheckId = this.bankList[i].id
          }
        }
      },
      confirm () {
        this.popupVisible = false
        this.bank_id = this.bankCheckId
        this.bank_name = this.bankCheckName
        // 选择银行后检测银行发布爆料数
        let params = {bank_id: this.bank_id}
        this.$post('/vue/report/check_report_bank', params)
      },
      complete () {
        this.disBtn = true
        let params = {
          bank_id: this.bank_id,
          bank_name: this.bank_name,
          name: this.name,
          url: this.url,
          content: this.content,
          image: this.image
        }
        this.$post('/vue/report/save_report', params).then(data => {
          msg(data, () => {
            this.$router.go(-1)
          })
        })
      },
      uploads (event) {
        let file = event.target.files[0]
        let formdata = new FormData()
        formdata.append('file', file)
        formdata.append('action', 'test')
        this.$post('/vue/upload/index', formdata).then(data => {
          msg('上传成功', () => {})
          this.image = data
          this.imgTitle = '图片上传完成~！'
        })
      }
    },
    mounted () {
      this.getBanks()
    }
  }
  /**
   * @augments m           消息内容
   * @augments callback    回调函数
   */
  const msg = (m, callback) => {
    Toast({
      message: m,
      position: 'bottom',
      duration: 2000
    })
    setTimeout(() => {
      callback()
    }, 2000)
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(217, 117, 99);
  @c-blue: rgb(108, 184, 222);
  @c-sky-blue: rgb(38, 162, 255);

  .report-add {
    height: calc(~'100vh - 57px');
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #FFF;
    padding: 0 12px;
    .form-field {
      display: block;
      border: 0;
      border-radius: 24px;
      width: 100%;
      height: auto;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-top: 16px;
      position: relative;
      .text-input, .textarea {
        font-size: 13px;
        line-height: 24px;
        color: @c-124;
        border: 0;
        margin: 12px 16px;
        flex: 1 0 auto;
        &::-webkit-input-placeholder {
          color: @c-169;
          font-size: 12px;
          line-height: 24px;
        }
      }
      .textarea {
        height: calc(~'100vw * 0.43');
      }
      .file-content {
        position: absolute;
        left: 16px;
        font-size: 12px;
        line-height: 48px;
        color: @c-169;
      }
      .file-input {
        display: block;
        border: 0;
        height: 48px;
        min-height: 48px;
        margin: 0 16px;
        flex: 1 0 auto;
        opacity: 0;
      }
      .field-button {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border: 1px solid @c-blue;
        border-radius: 20px;
        margin: 4px;
        box-sizing: border-box;
        box-shadow: 0 0 4px 0 rgb(121, 154, 170);
      }
    }
    .button-row {
      margin: 24px 0;
      .mint-button {
        background-color: @c-blue;
        color: #FFF;
        line-height: 0;
        width: calc(~'100vw * 0.448');
        height: calc(~'100vw * 0.1067');
        border-radius: calc(~'(100vw * 0.1067) / 2');
        .mint-button-text {
          font-size: 13px;
          line-height: 24px;
        }
        &.is-disabled {
          opacity: 1;
          background-color: @c-226;
        }
      }
    }
    .notice {
      margin-top: 24px;
      font-size: 12px;
      line-height: 24px;
      color: @c-124;
      text-align: left;
      .ti-2 {
        text-indent: 2em;
      }
    }
    .mint-popup-bottom {
      width: 100vw;
      .picker-toolbar {
        font-size: 12px;
        line-height: 40px;
        color: @c-169;
        .picker-bar {
          display: flex;
          span {
            flex: 1;
            font-size: 16px;
            line-height: 40px;
            color: @c-sky-blue;
          }
        }
      }
    }
    .footer-button {
      padding: 8px;
      border-top: 1px solid @c-226;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #FFF;
      img {
        width: 24px;
        height: 24px;
      }
      .mint-button {
        height: 40px;
        padding: 7px 0;
        width: 168px;
        text-align: center;
        background-color: @c-blue;
        border-radius: 20px;
        line-height: 0;
        .mint-button-icon {
          line-height: 0;
        }
        .mint-button-text {
          font-size: 13px;
          line-height: 24px;
          color: #FFF;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .ov-h {
      overflow: hidden;
    }
  }
</style>